<template>
  <div class="container">
    <li @click="userDetails('1')" style="--t:20%;">
      <a>
        <el-tooltip
            effect="light"
            content="个人中心"
            placement="left"
        >
<!--          <el-avatar :size="30" src="/个人中心.png" />-->
          <svg  t="1741623712860" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14379" width="20" height="20"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FD846F" p-id="14380"></path><path d="M646.339048 374.954667c0 75.897905-61.318095 136.777143-137.801143 136.777143s-137.825524-60.879238-137.825524-136.777143c0-75.922286 61.342476-136.021333 137.825524-136.021334 76.483048 0 137.825524 60.099048 137.825524 136.021334z m82.724571 417.401904H281.112381c-19.69981 0-28.550095-14.628571-28.550095-34.108952 0-115.95581 85.650286-207.530667 199.850666-207.530667h105.325715c114.200381 0 213.625905 92.550095 213.625904 208.505905v-1.950476c0.975238 19.504762-22.649905 34.108952-42.325333 35.08419z" fill="#FFFFFF" p-id="14381"></path></svg>
        </el-tooltip>
      </a>
    </li>
    <li @click="userDetails('2')" style="--t:30%;">
      <a>
        <el-tooltip
            effect="light"
            content="发表文章"
            placement="left"
        >
<!--          <el-avatar :size="30" src="/文章编辑.png" />-->
          <svg t="1741623676253" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13272" width="20" height="20"><path d="M795.7 530.9v313.9c0 22.8-17.7 38-38 38H183c-22.8 0-38-17.7-38-38V267.6c0-22.8 17.7-38 38-38h306.3c22.8 0 38-17.7 38-38 0-22.8-17.7-38-38-38H162.7c-53.2-2.5-98.7 40.5-98.7 96.2v612.7c0 53.2 43 98.7 98.7 98.7h612.7c53.2 0 98.7-43 98.7-98.7V530.9c0-22.8-17.7-38-38-38-22.7-2.5-40.4 15.2-40.4 38z m0 0" fill="#2DAD46" p-id="13273"></path><path d="M328.1 517.5c-2.7 5.4-5.4 8.2-5.4 13.6l-35.4 130.8c-5.5 19.1 0 40.9 13.6 54.5 13.6 13.6 35.4 19.1 54.5 13.6L478 697.3c13.6 0 24.5-8.2 35.4-16.3l430.5-427.7c21.8-21.8 21.8-57.2 0-79l-95.4-95.4C837.6 68 824 62.5 807.6 62.5c-16.3 0-30 5.5-40.9 16.3L333.6 506.6c-2.8 2.8-5.5 8.2-5.5 10.9z m479.5-384.1l79 79-40.8 43.6-81.8-81.8 43.6-40.8z m-89.9 89.9l79 79-291.5 291.5-79-79 291.5-291.5zM379.9 566.6l68.1 68.1-95.4 24.5 27.3-92.6z m0 0" fill="#2DAD46" p-id="13274"></path></svg>
        </el-tooltip>
      </a>
    </li>
    <li @click="userDetails('3')" style="--t:40%;">
      <a>
        <el-tooltip
            effect="light"
            content="我的文章"
            placement="left"
        >
<!--          <el-avatar :size="30" src="/我的文章.png" />-->
          <svg t="1741623646070" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12169" width="20" height="20"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="12170"></path><path d="M682.666667 204.8h238.933333a34.133333 34.133333 0 0 1 34.133333 34.133333v648.533334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V204.8z" fill="#FFAA44" p-id="12171"></path><path d="M68.266667 921.6a34.133333 34.133333 0 0 0 34.133333 34.133333h785.066667a68.266667 68.266667 0 0 1-68.266667-68.266666V102.4a34.133333 34.133333 0 0 0-34.133333-34.133333H102.4a34.133333 34.133333 0 0 0-34.133333 34.133333v819.2z" fill="#11AA66" p-id="12172"></path><path d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z" fill="#FFFFFF" p-id="12173"></path></svg>
        </el-tooltip>
      </a>
    </li>
    <li @click="userDetails('4')" style="--t:50%;">
      <a>
        <el-tooltip
            effect="light"
            content="我的收藏"
            placement="left"
        >
<!--        <el-avatar :size="30" src="/我的收藏.png" />-->
          <svg t="1741623608572" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11062" width="20" height="20"><path d="M785.066667 455.111111l-176.355556-34.133333-85.333333-159.288889c0-5.688889-11.377778-11.377778-11.377778-11.377778s-11.377778 5.688889-17.066667 11.377778L409.6 420.977778 233.244444 455.111111c-11.377778 0-17.066667 5.688889-17.066666 5.688889s0 11.377778 5.688889 17.066667L341.333333 614.4l-17.066666 176.355556v17.066666H341.333333l170.666667-73.955555 159.288889 73.955555h17.066667s5.688889-11.377778 0-17.066666l-17.066667-176.355556L796.444444 477.866667c5.688889-5.688889 11.377778-17.066667 5.688889-17.066667 0 0-5.688889-5.688889-17.066666-5.688889z" fill="#f4ea2a" p-id="11063"></path><path d="M534.755556 39.822222h-45.511112C221.866667 39.822222 0 261.688889 0 529.066667s221.866667 489.244444 489.244444 489.244444h51.2c267.377778 0 489.244444-221.866667 489.244445-489.244444S802.133333 39.822222 534.755556 39.822222zM830.577778 512l-102.4 113.777778 17.066666 153.6c0 28.444444-5.688889 51.2-22.755555 62.577778-5.688889 5.688889-17.066667 11.377778-34.133333 11.377777-11.377778 0-22.755556 0-34.133334-5.688889L512 785.066667 369.777778 853.333333c-22.755556 11.377778-51.2 11.377778-68.266667 0-17.066667-11.377778-28.444444-34.133333-22.755555-62.577777l17.066666-153.6L187.733333 512c-17.066667-17.066667-22.755556-45.511111-17.066666-68.266667 11.377778-17.066667 28.444444-34.133333 56.888889-39.822222l153.6-34.133333L455.111111 238.933333c17.066667-22.755556 34.133333-34.133333 56.888889-34.133333s45.511111 17.066667 56.888889 39.822222l73.955555 136.533334 153.6 28.444444c28.444444 5.688889 45.511111 22.755556 51.2 39.822222 11.377778 22.755556 5.688889 45.511111-17.066666 62.577778z" fill="#1296db" p-id="11064"></path></svg>
        </el-tooltip>
      </a>
    </li>

    <li @click="userDetails('5')" style="--t:60%;">
      <a >
        <el-tooltip
            effect="light"
            content="BUG反馈"
            placement="left"
        >
<!--          <el-avatar :size="30" src="/BUG反馈.png" />-->
          <svg t="1741623532827" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9972" width="20" height="20"><path d="M285.92128 53.95456a40.96 40.96 0 0 0-59.84256 55.93088l9.1136 9.75872c149.76 160.23552 403.8656 160.23552 553.61536 0l9.1136-9.75872a40.96 40.96 0 0 0-59.84256-55.93088l-9.1136 9.75872c-117.38112 125.58336-316.54912 125.58336-433.92 0l-9.1136-9.75872zM81.67424 333.02528a40.96 40.96 0 0 0-40.46848 71.22944l15.5136 8.8064a920.84224 920.84224 0 0 0 271.104 101.74464 675.81952 675.81952 0 0 0-66.82624 22.76352l-225.01376 90.0096a40.96 40.96 0 0 0 30.43328 76.05248l225.00352-90.0096a593.92 593.92 0 0 1 441.15968 0l225.01376 90.0096a40.96 40.96 0 1 0 30.4128-76.06272l-225.00352-90.0096a676.16768 676.16768 0 0 0-66.82624-22.75328 920.832 920.832 0 0 0 271.104-101.7344l15.5136-8.81664a40.96 40.96 0 0 0-40.46848-71.22944l-15.5136 8.81664a839.68 839.68 0 0 1-829.62432 0l-15.5136-8.8064z m441.7024 426.3424a40.96 40.96 0 0 0-22.75328 0l-368.64 106.5984a40.96 40.96 0 1 0 22.75328 78.6944L512 841.35936l357.26336 103.30112a40.96 40.96 0 1 0 22.75328-78.6944l-368.64-106.5984z" fill="#08979C" p-id="9973"></path><path d="M122.88 563.2a450.56 389.12 90 1 0 778.24 0 450.56 389.12 90 1 0-778.24 0Z" fill="#36CFC9" p-id="9974"></path><path d="M471.04 1011.3024V399.36h81.92v611.9424a340.30592 340.30592 0 0 1-81.92 0z" fill="#B5F5EC" p-id="9975"></path><path d="M166.11328 362.12736C230.79936 213.93408 361.41056 112.64 512 112.64c152.20736 0 284.0064 103.49568 347.9552 254.30016C769.71008 418.85696 649.3184 450.56 517.12 450.56c-136.2432 0-259.92192-33.65888-351.00672-88.43264z" fill="#08979C" p-id="9976"></path><path d="M389.12 276.48m-71.68 0a71.68 71.68 0 1 0 143.36 0 71.68 71.68 0 1 0-143.36 0Z" fill="#B5F5EC" p-id="9977"></path><path d="M624.64 266.24m-71.68 0a71.68 71.68 0 1 0 143.36 0 71.68 71.68 0 1 0-143.36 0Z" fill="#B5F5EC" p-id="9978"></path></svg>
        </el-tooltip>
      </a>
    </li>
    <li @click="userDetails('6')" style="--t:70%;">
      <a>
        <el-tooltip
            effect="light"
            content="通知"
            placement="left"
        >
<!--          <el-avatar :size="30" src="/public/profile.jpg" />-->
          <svg t="1741959975088" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2885" width="20" height="20"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="2886"></path><path d="M612.9664 119.364267A307.336533 307.336533 0 0 1 819.2 409.6v240.981333c58.2656 10.717867 102.4 61.781333 102.4 123.118934 0 6.280533-5.12 11.3664-11.3664 11.3664H113.7664A11.3664 11.3664 0 0 1 102.4 773.700267a125.201067 125.201067 0 0 1 102.4-123.118934V409.6a307.336533 307.336533 0 0 1 206.2336-290.235733 102.4 102.4 0 0 1 201.9328 0z" fill="#11AA66" p-id="2887"></path><path d="M341.333333 832.170667a17.066667 17.066667 0 0 1 16.5888-12.970667h308.155734a17.066667 17.066667 0 0 1 16.5888 12.970667A170.973867 170.973867 0 0 1 512 989.866667a170.973867 170.973867 0 0 1-170.666667-157.696z" fill="#FFAA44" p-id="2888"></path></svg>
        </el-tooltip>
      </a>
    </li>
<!--    <li style="&#45;&#45;t:70%;">
      <a >
        <el-avatar :size="30" src="/public/profile.jpg" />
      </a>
    </li>-->
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
  </div>
</template>

<script setup>
import router from "@/router/index.js"
import useUserStore from "@/stores/user.js";
import {ElMessage} from "element-plus";
const userStore = useUserStore();
//校验登录
async function checkLogin(){
  if (userStore.token === undefined || userStore.token === '' || userStore.token === null){
    ElMessage.success("请先登录")
    await router.push("/login")
    return false
  }
  return true
}
async function userDetails(i){
  switch (i){
    case '1':
    {
      if (await checkLogin()){
        await router.push("/userInfo")
      }
      break;
    }
    case '2':
    {
      if (await checkLogin()){
        await router.push("/addArticle")
      }
      break
    }
    case '3':
    {
      if (await checkLogin()){
        await router.push("/myArticle")
      }
      break
    }
    case '4':
    {
      if (await checkLogin()){
        await router.push("/articleCollect")
      }

      break
    }
    case '5':
    {
      await router.push("/feedBack")
      break
    }
    case '6':
    {
      await router.push("/notice")
      break
    }
  }

}

</script>
<style scoped>
.icon{
  padding-bottom: 3.5px;
}


.container {
  width: 5px;
  height: 500px;
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #222;
  border-radius: 0 15px 15px 0;
  overflow: hidden;
  transition: 0.3s;
  cursor: pointer;
}

.container:hover {
  width: 115px;
  border-radius: 0 10px 10px 0;
}

/*.container:hover li a {
  color: #fff;
}*/

.container::before {
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: lightseagreen;
}

.container .top {
  width: calc(100% - 30px);
  margin-left: 30px;
  height: 20%;
  background-color: #222;
  border-radius: 0 0 0 20px;
  transition: 0.2s;
}

.container .middle {
  width: calc(100% - 60px);
  height: 10%;
  background-color: lightseagreen;
  margin-left: 40px;
  border-radius: 20px;
}

.container .bottom {
  width: calc(100% - 30px);
  height: 100%;
  margin-left: 30px;
  background-color: #222;
  border-radius: 20px 0 0 0;
}

.container li {
  position: absolute;
  top: var(--t);
  width: 100%;
  height: 10%;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container li a {
  color: transparent;
  transition: 0.3s;
  margin-top: 6px;
}

.container li:nth-child(1):hover~.top {
  height: 20%;
}

.container li:nth-child(2):hover~.top {
  height: 30%;
}

.container li:nth-child(3):hover~.top {
  height: 40%;
}

.container li:nth-child(4):hover~.top {
  height: 50%;
}

.container li:nth-child(5):hover~.top {
  height: 60%;
}

.container li:nth-child(6):hover~.top {
  height: 70%;
}
</style>